<script setup>
import Captcha from "@/components/Captcha/index.vue";
import request from "@/utils/request";
import { showErrorMsg, showSuccessMsg } from '@/utils/show-msg';
import { saveInLocalStorage } from "@/utils/store-data";
import { ref } from 'vue';
import { useRouter } from "vue-router";

const validateCaptcha = (rule, value, callback) => {
  if (value === undefined || value === '') {
    showErrorMsg("请输入验证码");
    callback(new Error('请输入验证码'));
  } else if (value.toLowerCase() != captcha.value.toLowerCase()) {
    showErrorMsg("验证码错误");
    callback(new Error('验证码错误'))
  } else {
    showSuccessMsg("验证码正确");
    callback()
  }
}
const formTitle = ref("欢迎登录后台管理系统")
const router    = useRouter()
const captcha   = ref('')
const formRef   = ref(null)
const user      = ref({ username: 'admin', password: '123456', captcha: '' })
const rules     = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }, { min: 2, max: 20, message: '账号长度为2-20个字符', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 2, max: 20, message: '密码长度为2-20个字符', trigger: 'blur' }],
  captcha : [{ validator: validateCaptcha, trigger: 'blur' }]
}
const getCaptcha = e => captcha.value = e
const toRegister = () => router.push({ name: 'Register' })

const handleLogin = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      showErrorMsg("请输入正确的账号和密码,再进行登录");
    } else {
      request({
        url: '/login',
        method: 'post',
        data: {
          username: user.value.username,
          password: user.value.password
        }
      }).then((res) => {
        saveInLocalStorage("token", res.data.token)
        saveInLocalStorage("current-user", res.data)
        showSuccessMsg("登录成功")
        router.push({name: "Manager"})
      }).catch(error => {
        showErrorMsg(error)
        showErrorMsg("登录失败")
      })
    }
  })
}
</script>

<template>
  <div class="content">
    <div class="main">
      <div class="left-login-img"><img src="@/assets/images/login.png" alt="LoginImg"></div>
      <div class="right-login-form">
        <el-form :model="user" ref="formRef" :rules="rules">
          <div class="form-title">{{ formTitle }}</div>
          <el-form-item prop="username"><el-input placeholder="请输入账号" v-model="user.username"></el-input></el-form-item>
          <el-form-item prop="password"><el-input placeholder="请输入密码" v-model="user.password"></el-input></el-form-item>
          <el-form-item prop="captcha" ><div class="captcha-div"><el-input placeholder="请输入验证码" v-model="user.captcha"></el-input><div class="captcha"><Captcha @update:value="getCaptcha" /></div></div></el-form-item>
          <el-form-item><el-button type="primary" class="login-btn" @click="handleLogin">登 录</el-button></el-form-item>
          <div class="plus"> <div class="register-tip">还没有账号?请<span class="tip" @click="toRegister">注册</span></div> <div class="forget-password"><span class="tip">忘记密码</span></div> </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0f9876;
  .main {
    display: flex;
    width: 50%;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    .left-login-img { flex: 1; img { width: 100%; } }
    .right-login-form {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-form {
        width: 80%;
        .form-title {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
        }
        .captcha-div { display: flex; }
        .captcha { flex: 1; height: 36px; }
        .login-btn { width: 100%; }
        .plus {
          display: flex;
          .tip { color: #0f9876; cursor: pointer; }
          .register-tip { flex: 1; }
          .forget-password { flex: 1; text-align: right; }
        }
      }
    }
  }
}
</style>
